<template>
    <div class="search">
        <!-- 搜索框 -->
        <van-search
        v-model="searchValue"
        show-action
        shape="round"
        placeholder="搜索"
        @cancel="handleCancelClick"
        @search="onSearch"
        clearable
        autofocus
        >
        <template #action v-if="isRight">
            
        </template>
        </van-search>

        <!-- 搜索历史 -->
        <div class="history_content">
            <van-cell>
                <template #title>
                    <span class="history_title">搜索历史</span>
                </template>
            </van-cell>
            <div class="history_tags">
                <div
                class="list"
                v-for="(item, index) in historyList"
                :key="index"
                >{{item.searchName}}</div>
            </div>
        </div>

        <!-- 数据列表 -->
        <div class="personal_outer">
            <div class="personal_content">
            <van-checkbox-group v-model="checkArr" ref="listCheck" @change="handleListCheckbox" max="1">
                <data-list
                v-for="(item, index) in listData"
                :key="item.id"
                :title="item.fileName"
                :label="item.lastModifiedTime"
                :index="item.id"
                :menuParameter="menuParameter"
                :isCollection="item.isFavourite == 0 ? false : true"
                :isTouch="isTouch"
                :DetailsArr="DetailsArr[index]"
                v-longtap="() => handleTouch(item, index)"
                ></data-list>
            </van-checkbox-group>
            </div>
        </div>

        <operation-menu
        :menuParameter="menuParameter"
        isKnowledge
        v-show="isTouch"
        :checkArr="checkArr"
        @handleRemoveMessage="handleRemoveMessage"
        @KnowledgeTreeCancelCollection="KnowledgeTreeCancelCollection"
        :isFavourite="isFavourite"
        ></operation-menu>

    </div>
</template>

<script>
import DataList from "components/public/DataList.vue"
import OperationMenu from "components/public/OperationMenu.vue"

export default {
    name: 'Search',
    components: {
        DataList,
        OperationMenu
    },
    props: {
        // 是否显示右侧
        isRight: {
            type: Boolean,
            default: false,

            // 通用变量
            // 顶部标题
            topTitle: "",
            // 是否长按标识
            isTouch: false,
            checkArr: [],
            // 个人文档数据列表
            listData: [],
            // 将文件id和文件类型传给详情组件
            DetailsArr: [],
            // 将id和treeId传给操作菜单组件，用于操作事件
            menuParameter: {},
            // 长按选中的index下标
            activeIndex: 0,
            // 选中是否收藏
            isFavourite: false
        }
    },
    data() {
        return {
            searchValue: '',
            // 搜索历史
            historyList: []
        }
    },
    created(){
        this.getTagsList()
    },
    methods: {
        getTagsList(){
            this.$request({
                url: '/api/General/GetSearchHistorys',
                params: {
                    Token: sessionStorage.getItem("mobileToken")
                }
            }).then(({data}) => {
                if(data.code == 200) {
                    this.historyList = data.data
                }else{
                    this.$notify(data.msg)
                }
            })
        },
        // 提交搜索
        onSearch(val){
            // if (event.keyCode == 13) { //如果按的是enter键 13是enter 
            //     event.preventDefault(); //禁止默认事件（默认是换行） 
            //     console.log(event.target.value)
            //     this.$notify({type:'danger', message: '点击了确认'})
            // }
            this.$notify({type:'danger', message: '点击了确认'})
            this.$request({
                method: 'get',
                url: '/api/KnowledgeTree/GetKnowledgeTreeByTreeId',
                params: {
                    Token: sessionStorage.getItem("mobileToken"),
                    treeId: this.$route.params.currentTreeId,
                    Name: this.searchValue,
                    FileCategory: '全部',
                    pageSize: 10,
                    pageIndex: 1
                }
            }).then(({data}) => {
                if(data.code == 200){
                    this.listData = data.knowledgeTreeFileList
                    this.$notify({type: 'success', message: data.msg})
                }else{
                    this.$notify(data.msg)
                }
            })
        },
        // 点击取消事件
        handleCancelClick(){
            this.$router.go(-1)
        },

        // 通用事件
        // 列表长按事件
        handleTouch(item, index) {
            // console.log("长按了");
            // console.log(item)
            this.activeIndex = index
            this.checkArr.push(item.id);
            this.isTouch = true;
            // console.log(this.$route)
        },
        // 监听多选按钮点击事件
        handleListCheckbox(arr){
            // console.log(arr)
            // console.log(JSON.parse(this.$route.params.item).treeId)
            this.menuParameter.idArr = arr[0]
            this.menuParameter.treeId = JSON.parse(this.$route.params.item).treeId
            this.menuParameter.resourcesId = this.listData[this.activeIndex].resourcesId
            this.menuParameter.type = this.listData[this.activeIndex].type
            this.menuParameter.hdfsUrl = this.listData[this.activeIndex].hdfsUrl
            this.isFavourite = this.listData[this.activeIndex].isFavourite == 0 ? false : true

            // console.log(this.menuParameter)
        },
    }
}
</script>

<style lang="less" scoped>
.search /deep/ .van-search{
    padding: 10px 0;
}
.history_content /deep/ .van-cell{
    padding: 30px 0;
}

.history_title{
    font-size: 15px;
    color: #2a2b2d;
    font-weight: 600;
}
.history_tags{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    .list{
        width: 30%;
        max-width: 103px;
        border: 1px solid #f1f1f1;
        border-radius: 30px;
        margin-right: 10px;
        margin-bottom: 10px;
        padding: 7px 8.5px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        color: #2a2b2d;
        font-size: 14px;
    }
}
</style>